<template>
  <div class="main_app">
    <el-tabs type="border-card" stretch v-model="tabActiveValue">
      <el-tab-pane v-for="item in tabMap" :key="item.label" :name="item.label" lazy>
        <span slot="label"><i :class="item.icon"></i> {{ item.label }}</span>
        <component :is="item.comp" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
/* eslint-disable no-empty */
import { TAB_MAP } from '../config'
import Components from '../components'

const {
  ...args
} = Components

export default {
  name: 'app',
  components: {
    ...args
  },
  watch: {
    tabActiveValue(val) {
      window.localStorage.setItem('ACTIVE_TABS_KEY', val)
    }
  },
  data() {
    return {
      tabMap: TAB_MAP,
      tabActiveValue: ''
    }
  },
  created() {
    const tabActiveValue = window.localStorage.getItem('ACTIVE_TABS_KEY')
    if (tabActiveValue) {
      this.tabActiveValue = tabActiveValue
    } else {
      this.tabActiveValue = (TAB_MAP[1] && TAB_MAP[1].label) || ''
    }
  }
}
</script>
